import React from 'react';
import './ReFreshLoss.css'
import {Button,  vInput, Select, Table,  DatePicker,  Radio, Row, Col, Tooltip } from 'antd';
import axios from 'axios'
import {QuestionCircleOutlined} from '@ant-design/icons';
import echarts from 'echarts/lib/echarts';
import  'echarts/lib/chart/line';

const { RangePicker } = DatePicker;
const title = {
    color: '#96a6b6',
    fontSize: '13px',
    transition: 'all .5s',
    marginTop: '25px'
};
const purchase = {
    cursor: 'pointer',
    height: '100%'
};
const contrast = {
    color: '#7b8aa1'
};
const title2 = {
    backgroundColor:'#f8f9fd',
    textAlign:'center',
    height: '110px',
    borderTop:'1px solid #eee',
    borderBottom: '1px solid #f1f2f7',

};
const num = {
    color: '#415161',
    fontSize: '22px'
};
const content = {
    borderLeft: '1px solid #ebebeb',
    borderRight: '1px solid #ebebeb'
};
const lastnum = {
    color: '#7b8aa1',
    position: 'absolute',
    right: '0'
};
const { Option, OptGroup } = Select;
const columns = [
    {
        title: '商品编码',
        dataIndex: '',
        key: '',
    },{
        title: '商品名称',
        dataIndex: '',
        key: '',
    },{
        title: '商品规格',
        dataIndex: '',
        key: '',
    },{
        title: '单位',
        dataIndex: '',
        key: '',
    },{
        title: '配送数量',
        dataIndex: 'no1',
        key: 'no1',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.no1 - b.no1,
    },{
        title: '收货数量',
        dataIndex: '',
        key: '',
        sorter: (a, b) => a.no1 - b.no1,
    },{
        title: '损耗数量',
        dataIndex: '',
        key: '',
        sorter: (a, b) => a.no1 - b.no1,
    },{
        title: '损耗率',
        dataIndex: '',
        key: '',
        sorter: (a, b) => a.no1 - b.no1,
    },{
        title: '损耗金额',
        dataIndex: '',
        key: '',
        sorter: (a, b) => a.no1 - b.no1,
    },{
        title: '操作',
        dataIndex: '',
        key: '',
    },
];
const data = [

];

function handleChange(value) {
    console.log(`selected ${value}`);
}

class ReFreshLoss extends React.Component {
    constructor(){
        super();
        this.state={

        };

    }
    componentDidMount() {
        //订单报表折线图
        var reSale = echarts.init(document.getElementById('sale'));
        // 绘制图表
        reSale.setOption({
            series : [
                {
                    name:'',
                    type:'pie',
                    data:[
                        {value:1000, name:'星期一'}
                    ],
                }
            ]
        });
        reSale.on('finished', function () {
            reSale.resize();
        });
    }

    render() {
        return (
            <div id={'mainContent'}>
                <Row style={{marginBottom:'8px'}}>
                    <Col span={6}>
                        <Radio.Group defaultValue="a" buttonStyle="solid" className={'rg'}>
                            <Radio.Button value="a">本周</Radio.Button>
                            <Radio.Button value="b">上周</Radio.Button>
                            <Radio.Button value="c">本月</Radio.Button>
                            <Radio.Button value="d">上月</Radio.Button>
                        </Radio.Group>
                    </Col>
                    <Col span={6}>
                        发货时间<RangePicker/>
                    </Col>
                    <Col span={6}>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"right"}}>
                            <Button type="primary" style={{marginLeft:'10px'}}>导出</Button>
                        </div>
                    </Col>
                </Row>
                <div className={'body'}>
                    <Row style={title2}>
                        <Col span={6} style={{width:'25%'}}>
                            <div style={title}>配送总数量</div>
                            <div style={contrast}>
                                <span style={num}>0</span>
                                <span>笔</span>
                            </div>

                        </Col>
                        <Col span={6} style={title2}>
                            <div style={title}>客户收货数量</div>
                            <div style={contrast}>
                                <span style={num}>0</span>
                                <span>笔</span>
                            </div>
                        </Col>
                        <Col span={12} style={title2}>
                            <Row>
                                <Col span={8}>
                                    <div style={title}>损耗总数量</div>
                                    <div style={contrast}>
                                        <span style={num}>0</span>
                                    </div>
                                </Col>
                                <Col span={8}>

                                    <div style={title}>损耗率</div>
                                    <div style={contrast}>
                                        <span style={num}>0%</span>
                                    </div>
                                </Col>
                                <Col span={8}>
                                    <div style={title}>损耗总金额</div>
                                    <div style={contrast}>
                                <span style={{color: '#f33333',
                                    fontSize: '22px'}}>0</span>
                                    </div>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <div style={content}>
                        <div style={{padding:'25px 0 25px 0'}}>
                            <Row>
                                <Col span={6}>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 9.5% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">损耗金额</Option>
                                        <Option value="2">损耗数量</Option>
                                        <Option value="3">损耗率</Option>
                                    </Select>
                                </Col>
                                <Col span={6}>
                                </Col>
                                <Col span={6}>
                                </Col>
                                <Col span={6}>
                                </Col>
                            </Row>
                        </div>
                        <div id="sale" style={{width: '100%', height: 400}}/>
                    </div>
                    <div>
                        <Table columns={columns} dataSource={data} />
                    </div>
                </div>
            </div>
        );
    }
}

export default ReFreshLoss;